// 商品验收对话框
<template>
  <el-dialog title="" :visible.sync="centerDialogVisible" width="30%" center>
    <div class="body">
      <div class="header_text">
        <span>商品验收</span>
      </div>
      <div class="content_item_table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column label="商品名称" show-overflow-tooltip align="left">
            <template slot-scope="scope" class="table_item">
              <div class="table_iteml">
                <img
                  src="../../assets/img/a.jpg"
                  alt=""
                  class="table_item_img"
                />
              </div>
              <div class="table_itemr">
                <div>
                  <span>{{ scope.row.goods_name }}</span>
                </div>
                <div>
                  <span>规格：{{ scope.row.spec_key_name }}</span>
                </div>
                <div>
                  <span>单价：{{ scope.row.goods_price }}</span>
                </div>
                <div>
                  <span>数量：{{ scope.row.goods_num }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="refund_quantity"
            label="退货数量"
            align="center"
            width="80"
          >
          </el-table-column> -->
        </el-table>
      </div>
      <div class="center_from">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          @selection-change="handleSelectionChange"
        >
          <el-form-item label="订单编号">
            <span>{{Refund.order_sn}}</span>
          </el-form-item>
          <el-form-item label="订单时间">
            <span>{{Refund.add_time}}</span>
          </el-form-item>
          <el-form-item label="买家信息">
            <span>张晓华，185412415454</span>
          </el-form-item>
          <el-form-item label="收货地址">
            <span>{{Refund.addr}}</span>
          </el-form-item>
          <el-form-item label="退款方式">
            <span>退货退款</span>
          </el-form-item>
          <el-form-item label="退货理由">
            <span>产品与描述不否/不喜欢</span>
          </el-form-item>
          <el-form-item label="退货信息">
            <el-input value="李彤，18454584854"></el-input>
          </el-form-item>
          <el-form-item label="退货地址">
            <el-input value="山西省xx市xx区xx街道 150号"></el-input>
          </el-form-item>
          <el-form-item label="快递公司">
            <el-select v-model="form.region" placeholder="请选择快递公司">
              <el-option label="某某某2物流公司" value="shanghai"></el-option>
              <el-option label="某某某1物流公司" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退货物流单号">
            <el-input value="12452452415153646"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注信息"
              value="商品合格允许退货"
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="footer">
        <div class="btn">
          <button class="btn_determine" @click="confirmD">验收</button>
          <button class="btn_cancel" @click="closeD">取消</button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Popup",
  props:[
    'Refund'
  ],
  data() {
    return {
      centerDialogVisible: false, // 对话框状态
      // 商品信息
      tableData: [
        {
          image: "",
          goods_name: "纯棉加厚柔软吸水家用毛巾", // 商品信息
          goods_norms: "白色", //商品规格
          goods_univalent: "￥10", //商品单价
          goods_quantity: "1", //商品数量
          refund_quantity: "1", // 发送数量
        },
      ],
      // 录入表单数据
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        remarks:"",
      },
    };
  },
  methods: {
    //   table序号选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表单提交
    confirmD() {
      this.$message({
        type:"success",
        message:"验货成功！"
      })
      this.centerDialogVisible = false;
    },
    // 取消
    closeD() {
      this.centerDialogVisible = false;
    },
  },
};
</script>
<style scoped>
/******************************************************************* 对话框标题 ***********************************************************************/
.header_text {
  margin-bottom: 10px;
}
/******************************************************************* 商品表格外部容器 *State**适用场景：table底色变灰及内部修改********************************************************************/
/* table外边框 */
.content_item_table /deep/ .el-table {
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
}
/* table背色 */
.content_item_table /deep/ .el-table .el-table__cell {
  background-color: #fff;
}
/* td字体大小 */
.content_item_table /deep/ .el-table .cell {
  font-size: 12px;
  color: #5B5B5B ;
  line-height: 20px;
}
.table_item{
  font-size: 12px;
}
/* 商品左侧图片 */
.table_iteml {
  float: left;
  line-height: 75px;
}
.table_iteml img {
  width: 75px;
  height: 75px;
  float: left;
}
/* 商品右侧信息 */
.table_itemr {
  float: left;
  margin-left: 20px;
}
/* 发货数量输入框 */
.content_item_table input {
  width: 80%;
  text-align: center;
  border: 1px solid gainsboro;
  background-color: #fff;
}
/******************************************************************* 商品表格外部容器 *End**********************************************************************/

/******************************************************************* center_from *表单录入区域**********************************************************************/
.center_from {
  margin-bottom: 30px;
}
/* 取消表单块之间下边距 */
.center_from .el-form-item {
  margin-bottom: 0px;
}
/* 标题左对齐 */
.center_from /deep/ .el-form-item__label {
  text-align: left;
}
/* input录入宽度 */
.center_from /deep/ .el-input__inner {
  width: 70%;
  height: 30px;
}
/* select录入宽度 */
.center_from .el-select {
  width: 70%;
}
.center_from /deep/ .el-select .el-input__inner {
  width: 100%;
}
/******************************************************************* footer *底部按钮区域**********************************************************************/
.footer .btn {
  text-align: right;
}
</style>